<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./02.css">
</head>
<body>
    <div id="nav">
        <div class="nav">
            <!--v-for:循环 v-for="(item,index) in navs" -->
            <div class="nav-item" v-for="(item,index) in navs" :key="item.id">{{item.text}}</div>
        </div>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm=new Vue({
            el:"#nav",
            data:{
                // 保存数据
            navs:[{text:"新闻",id:1},
                    {text:"hao123",id:2},
                    {text:"地图",id:3},
                    {text:"视频",id:4},
                    {text:"贴吧",id:5},
                    {text:"学术",id:6},
                    {text:"更多",id:7}]
            },

        });



    </script>
</body>
</html>